<!--
- 基础属性
-->
<template>
  <a-form layout="vertical" :model="props.node" name="validate_other">
    <template v-if="nodeCodeArr.includes(props.node.nodeType)">
      <a-form-item label="节点编码" v-if="BranchNodesArr.includes(props.node.nodeType)">
        <a-input v-model:value="props.node.code" disabled></a-input>
      </a-form-item>
      <a-form-item label="节点编码" v-else>
        <a-input v-model:value="props.node.nodeKey" disabled></a-input>
      </a-form-item>
    </template>
    <template v-if="nodeNameArr.includes(props.node.nodeType)">
      <a-form-item label="节点名称">
        <a-input v-model:value="props.node.nodeName" @blur="nameChange" placeholder="请输入节点名称"></a-input>
      </a-form-item>
    </template>
    <template v-if="nodeFormArr.includes(props.node.nodeType)">
      <a-form-item label="节点表单" :rules="[{ required: true }]">
        <a-select v-model:value="props.node.formValue" show-search placeholder="请选择节点表单" :options="nodeFlowRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <!-- 派工 -->
    <template v-if="props.node.nodeType === nodeTypeNames.dispatchNode">
      <a-form-item label="派工人">
        <a-button class="ant-design-button" @click="showModal('选择员工')">设置派工人</a-button>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.dispatchNode">
      <a-form-item label="派工设置">
        <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
        <a-button type="link" size="small" @click="addDispatch">添加派工</a-button>
        <Draggable tag="ul" item-key="index" ghostClass="ghost" handle=".drag-item" :group="{ name: 'options' }"
          :list="dispatchList">
          <template #item="{ element, index }">
            <div class="draggable-option">
              <a-row>
                <CloseCircleFilled @click="deleteRe(index)" />
                <a-col :span="1" className="drag-item"><span class="iconfont up-Sort drag-item">
                    <UnorderedListOutlined style="width:10px" />
                  </span></a-col>
                <a-col :span="21" class="draggable-option-list">
                  <div class="draggable-option-item">
                    <span class="draggable-option-item-label">派工描述</span>
                    <a-input v-model:value="element.describe" placeholder="请输入按钮名称" style="width: 66%"
                      :getPopupContainer="
                        (triggerNode) => triggerNode.parentNode
                      "></a-input>
                    <a-button block :class="
                        element.defaultUser.rangeValue.length>1
                          ? 'ant-design-button-active'
                          : 'ant-design-button'
                      " @click="showModal">{{
                      element.defaultUser.rangeValue.length > 1 ? "已设置派工范围" : "设置派工范围"
                      }}</a-button>
                  </div>
                </a-col>
              </a-row>
            </div>
          </template>
        </Draggable>
      </a-form-item>
    </template>
    <!-- 经办 -->
    <template v-if="props.node.nodeType === nodeTypeNames.operatorNode">
      <a-form-item label="经办人">
        <a-select v-model:value="props.node.config.dispatch.type" placeholder="请选择节点表单" :options="HandlingRules"
          :filter-option="filterOption" @change="ChangeOperate"></a-select>
        <template v-if="props.node.config.dispatch.type == 'custom'">
          <a-button class="ant-design-button" @click="showModal('选择经办人')">设置经办人</a-button>
        </template>
        <template v-if="props.node.config.dispatch.type == 'nodeDispatch'">
          <span style="margin-top: 10px; display: block">派工节点</span>
          <a-select v-model:value="props.node.config.dispatch.nodeKey" placeholder="请选择派工节点"
            :options="nodeFormDispatchOpt" :filter-option="filterOption" @change="dispatchNodeChange"></a-select>
          <span style="margin-top: 10px; display: block">派工字段</span>
          <a-select v-model:value="props.node.config.dispatch.fieldName" placeholder="请选择派工字段"
            :options="dispatchLabelOpt" :filter-option="filterOption"></a-select>
        </template>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.approvalNode">
      <a-form-item label="审批方式">
        <a-select v-model:number="props.node.nodeKey" show-search placeholder="请选择节点表单" :options="nodeFlowRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.approvalNode">
      <a-form-item label="审批人">
        <a-button class="ant-design-button" @click="showModal('设置审批人')">设置审批人</a-button>
      </a-form-item>
    </template>
    <!-- 字段权限 -->
    <template v-if="fieldPermissionsArr.includes(props.node.nodeType)">
      <a-form-item label="字段权限">
        <a-table :columns="columnComputed" :data-source="props.node.config.form.column" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="record.columnName == '全选'">
              <a-checkbox v-if="column.key === 'visible'" @change="changeCheck(record.visibleValue)"
                v-model:checked="record.visibleValue"></a-checkbox>
              <a-checkbox v-if="column.key === 'edit'" @change="changeCheck1(record.editValue)"
                v-model:checked="record.editValue"></a-checkbox>
            </template>

            <template v-else>
              <a-checkbox v-if="column.key === 'visible'" v-model:checked="record.visibleValue"></a-checkbox>
              <a-checkbox v-if="column.key === 'edit'" v-model:checked="record.editValue"></a-checkbox>
              <a-checkbox v-if="column.key === 'bulletin'" @change="changeBulletin" :disabled="disable"
                v-model:checked="record.bulletinValue"></a-checkbox>
            </template>
          </template>
        </a-table>
      </a-form-item>
    </template>
    <!-- 按钮权限 -->
    <template v-if="btnPermissionsArr.includes(props.node.nodeType)">
      <a-form-item label="按钮权限">
        <a-table :columns="columns1" :data-source="props.node.config.button" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.title === '按钮名称'">
              <span v-if="record.buttonName == '全选'"></span>
              <a-input v-else v-model:value="record.buttonName"></a-input>
            </template>
            <template v-if="column.key === 'open'">
              <a-checkbox v-model:checked="record.enabled"></a-checkbox>
            </template>
          </template>
        </a-table>
      </a-form-item>
    </template>
    <!-- 子流程 -->
    <template v-if="props.node.nodeType === nodeTypeNames.subprocessNode">
      <a-form-item label="子流程">
        <a-select v-model:value="props.node.formValue" show-search placeholder="请选择子流程" :options="nodeFlowRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.subprocessNode">
      <a-form-item label="发起人">
        <a-button class="ant-design-button" @click="showModal('设置发起人')">设置发起人</a-button>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.subprocessNode">
      <a-form-item label="数据传递">
        <a-button class="ant-design-button" @click="showModal('设置规则')">设置规则</a-button>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.subprocessNode">
      <a-form-item label="节点流转规则">
        <a-select v-model:value="props.node.config.startSubFlowRule" :options="nodeFlowRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.subprocessNode">
      <a-form-item label="发起节点提交规则">
        <a-select v-model:value="props.node.nodeRule" :options="nodeSubmitRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <!-- 自动 -->
    <template v-if="props.node.nodeType === nodeTypeNames.autoNode">
      <a-form-item label="调用接口">
        <a-select v-model:value="props.node.nodeRule" :options="nodeSubmitRules"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>

    <!-- 并行分支，条件分支节点 -->
    <template v-if="BranchNodesArr.includes(props.node.nodeType)">
      <a-form-item label="条件描述">
        <a-input :disabled="props.node.nodeName == '其他情况'" v-model:value="props.node.nodeName"
          placeholder="请输入条件描述"></a-input>
      </a-form-item>
    </template>
    <template v-if="props.node.nodeType === nodeTypeNames.ifNode">
      <a-form-item label="优先级">
        <a-select v-model:value="value" :options="priority" :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <template v-if="
        BranchNodesArr.includes(props.node.nodeType) &&
        props.node.nodeName !== '其他情况'
      ">
      <a-form-item label="条件组关系">
        <a-select v-model:value="props.node.config.condition.type" :options="conditionalRelation"
          :filter-option="filterOption"></a-select>
      </a-form-item>
    </template>
    <template v-if="
        BranchNodesArr.includes(props.node.nodeType) &&
        props.node.nodeName !== '其他情况'
      ">
      <a-form-item label="分支条件">
        <PlusOutlined :style="{ color: 'rgb(75, 100, 241)' }" />
        <a-button type="link" size="small" @click="addIfRules">添加条件组</a-button>
        <WrsDraggable v-model:ifRuleList="ifRuleList"></WrsDraggable>
      </a-form-item>
    </template>
  </a-form>

  <!-- 弹窗 -->
  <a-modal v-model:visible="visible" :title="title" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>
<script setup>
import { ref, defineProps, onMounted, computed, watch } from "vue";
import Draggable from "vuedraggable";
import WrsDraggable from "@/components/flowDesign/flowCommon/compoents/dialog/WrsDraggable.vue";
import {
  UnorderedListOutlined,
  InboxOutlined,
  PlusOutlined,
  CloseCircleFilled,
} from "@ant-design/icons-vue";
import {
  nodeCodeArr,
  nodeNameArr,
  nodeFormArr,
  fieldPermissionsArr,
  btnPermissionsArr,
  BranchNodesArr,
  nodeFlowRules,
  HandlingRules,
  nodeSubmitRules,
  conditionalRelation,
  titleSetColumnLaunch,
  titleSetColumnDispatch,
  titleSetColumnHandling,
  titleSetColumnApproval,
  nodeTypeNames,
  priority,
} from "@/components/flowDesign/dicts/show.js";
import { debounce } from "lodash";
import { nodeNameChange, operatNodeConversion, operaLabelConversion } from "@/components/flowDesign/dicts/utils.js";
const props = defineProps({
  node: {
    type: Object,
  },
  flowData: {
    type: Object,
  },
});
const value = ref(1);
/**
 * 将传过来的数据进行处理
 * 按钮权限和字段权限
 * */
const threeData = { columnName: "全选", visibleValue: false, editValue: false };
const data = { buttonName: "全选", enabled: false }; //按钮是否可用
const disable = ref(false);
const changeBulletin = () => {
  console.log(
    "props.node.value.config.form.column",
    props.node.config.form.column
  );
  let arr = [];
  arr = props.node.config.form.column.fliter((item) => {
    item.editValue === true;
  });
  if (arr.length > 2) {
    disable.value = true;
  }
};
const changeCheck = (value) => {
  props.node.config.form.column.forEach((item) => {
    item.visibleValue = value;
  });
};
const changeCheck1 = (value) => {
  props.node.config.form.column.forEach((item) => {
    item.editValue = value;
  });
};
const columnComputed = computed(() => {
  if (props.node.nodeType === nodeTypeNames.dispatchNode) {
    return titleSetColumnDispatch;
  } else if (props.node.nodeType === nodeTypeNames.operatorNode) {
    return titleSetColumnHandling;
  } else if (props.node.nodeType === nodeTypeNames.approvalNode) {
    return titleSetColumnApproval;
  } else {
    return titleSetColumnLaunch;
  }
});
const columns1 = [
  {
    title: "按钮",
    dataIndex: "buttonName",
    key: "buttonName",
  },
  {
    title: "按钮名称",
    dataIndex: "buttonName",
    key: "buttonName",
  },
  {
    title: "启用",
    dataIndex: "open",
    key: "open",
  },
];
/**
 * 经办节点的处理
*/
const nodeFormDispatchOpt = ref([])
const changeDispatchNode = ref([])
const ChangeOperate = (value) => {
  const { result, option } = operatNodeConversion(props.flowData)
  nodeFormDispatchOpt.value = option
  changeDispatchNode.value = result
}
const dispatchLabelOpt = ref([])
const dispatchNodeChange = (value, option) => {
  props.node.config.dispatch.nodeName = option.label
  dispatchLabelOpt.value = operaLabelConversion(changeDispatchNode.value, value)
}
// 节点名称为空时，默认
const nameChange = () => {
  if (!props.node.nodeName || props.node.nodeName === "") {
    nodeNameChange(props.node);
  }
};
const dispatchList = ref([]);
const ifRuleList = ref([]);
watch(
  () => props.node.nodeType,
  (newValue) => {
    if (newValue === nodeTypeNames.dispatchNode) {
      dispatchList.value = props.node.config.dispatch.dispatchSet;
    }
    if (
      newValue === nodeTypeNames.pifNode ||
      newValue === nodeTypeNames.ifNode
    ) {
      ifRuleList.value = props.node.config.condition.nodeRule;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const addDispatch = () => {
  console.log("添加");
  dispatchList.value.push(
    {// 描述
      describe: '',
      // 派工范围
      defaultUser: {
        rangeType: "",
        rangeValue: []
      }
    }
  );
};
const deleteRe = (index) => {
  dispatchList.splice(index, 1);
};
// 添加分支条件
const addIfRules = () => {
  ifRuleList.value.push({
    type: undefined,
    nodeRule: [],
  });
  console.log(ifRuleList.value);
};
/**
 *
 * 弹窗
 * */
const visible = ref(false);
const title = ref();
const showModal = (value) => {
  visible.value = true;
  title.value = value;
};
const handleOk = (e) => {
  console.log(e);
  visible.value = false;
};
/**
 * 数据
 */

const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>
<style lang="less" scoped>
.flow-basic {
  height: 100vh;
  overflow: auto;
  margin-bottom: 47px;
}

.ant-design-button {
  width: 100%;
  color: rgb(12, 12, 12);
  border-color: rgb(15, 15, 15);
  margin: 5px 0;
}

.ant-design-button-active {
  width: 100%;
  color: rgb(75, 100, 241);
  border-color: rgb(75, 100, 241);
  margin: 5px 0;
}

.tableHiddle {
  display: none;
}

.tableShow {
  display: revert;
}
</style>
